<template>
  <div class="content-container">
    <van-nav-bar title="猜灯谜" left-arrow @click-left="onClickLeft" />
    <van-cell-group style="flex: 1">
      <div v-for="(riddle, index) in currentRiddles" :key="index" class="riddle-container">
        <div class="riddle-title">{{ startRiddleNumber + index + 1 }}. {{ riddle.question }}</div>
        <van-field v-model="answers[startRiddleNumber + index]" placeholder="请输入答案" class="answer-field" />
      </div>
      <van-divider></van-divider>
      <div class="button-group" style="bottom: 0">
        <van-button type="primary" @click="prevPage" :disabled="currentPage === 0">上一页</van-button>
        <van-button type="primary" @click="nextPage" :disabled="currentPage === totalPages - 1">下一页</van-button>
        <van-button type="success" @click="submitRiddles">提交</van-button>
      </div>
      <van-popup v-model:show="showResults" position="bottom" style="height: 80vh; font-size: 14px">
        <div class="results-header">
          <h3>你的得分: {{ score }} / 100</h3>
        </div>
        <div v-for="(result, index) in results" :key="index" class="result-container">
          <div class="result-title">{{ index + 1 }}. {{ riddles[index].question }}</div>
          <div :style="{ color: result.correct ? 'green' : 'red' }">
            {{ result.correct ? '正确' : '错误' }} (你的答案: {{ result.userAnswer || '未回答' }}，正确答案:
            {{ riddles[index].correctAnswer }})
          </div>
        </div>
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { riddles } from '@/config/constant'

const onClickLeft = () => history.back()
const currentPage = ref(0)
const answers = ref(Array.from({ length: riddles.length }, () => ''))
const showResults = ref(false)
const score = ref(0)

const totalPages = computed(() => Math.ceil(riddles.length / 5))

const currentRiddles = computed(() => {
  const start = currentPage.value * 5
  return riddles.slice(start, start + 5)
})

const startRiddleNumber = computed(() => currentPage.value * 5)

const prevPage = () => {
  if (currentPage.value > 0) currentPage.value--
}

const nextPage = () => {
  if (currentPage.value < totalPages.value - 1) currentPage.value++
}

const submitRiddles = () => {
  let totalScore = 0
  results.value = riddles.map((r, index) => {
    const userAnswer = answers.value[index]
    const correct = userAnswer === r.correctAnswer
    if (correct) {
      totalScore += 10
    }
    return { correct, userAnswer }
  })
  score.value = totalScore
  showResults.value = true
}

const results = ref([])

const closeResults = () => {
  showResults.value = false
}
</script>

<style scoped>
.content-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.van-cell-group {
  padding: 16px;
  background-color: #f9f9f9;
}

.riddle-container {
  margin-bottom: 16px;
}

.riddle-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.5;
}

.answer-field {
  margin-top: 8px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}

.van-popup {
  padding: 16px;
}

.results-header {
  text-align: center;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
}

.result-container {
  margin-bottom: 16px;
  margin-left: 16px;
}

.result-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.5;
}
</style>
